/*
 * Copyright 2021 The Android Open Source Project
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

package app.delish.compose.view

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.PaddingValues
import androidx.compose.foundation.layout.wrapContentWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.lazy.LazyRow
import androidx.compose.foundation.lazy.items
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.material.Surface
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

/**
 * 步骤选择器组件：以水平列表形式展示步骤编号，支持选择跳转
 *
 * 设计特点：
 * - 条带式布局：整个选择器呈现为水平连接的单一条带
 * - 首尾圆角：两端有圆角，中间项为直角，形成连续视觉效果
 * - 选中状态：当前选中项有反色高亮效果
 */
@Composable
fun RecipesStepsSelection(
    stepsCount: Int,             // 总步骤数
    modifier: Modifier = Modifier, // 布局修饰符（用于外部设置位置等）
    selectedIndex: (Int) -> Unit   // 选择回调（提供选择的步骤索引，从0开始）
) {
    // 生成步骤编号列表 (1, 2, 3, ..., stepsCount)
    val steps = (1 until stepsCount + 1).toList()
    // 当前选中索引（1-based，即从1开始计数）
    val currentIndex = remember { mutableStateOf(1) }

    // 水平滚动列表
    LazyRow(
        modifier = modifier,      // 应用外部传入的修饰符
        contentPadding = PaddingValues(8.dp)  // 左右内边距
    ) {
        // 遍历所有步骤创建选择器项
        items(steps) { item ->
            // 当前项是否为选中状态
            val selected = item == currentIndex.value

            // 每个步骤的表面容器
            Surface(
                modifier = Modifier
                    .wrapContentWidth(align = Alignment.CenterHorizontally)  // 内容宽度居中
                    .padding(1.dp)  // 微小的项间距
                    .clip(getCurrentShape(item, steps))  // 形状裁剪（创建首尾圆角）
                    .clickable {
                        // 点击时触发回调（传递0-based索引）
                        selectedIndex(item - 1)
                        // 更新内部选中状态
                        currentIndex.value = item
                    },
                // 根据选中状态确定颜色
                color = if (selected) Color.White else Color.DarkGray,
                // 根据位置确定形状
                shape = getCurrentShape(item, steps)
            ) {
                // 步骤编号文本
                Text(
                    modifier = Modifier.padding(
                        top = 8.dp,     // 顶部间距
                        bottom = 8.dp,  // 底部间距
                        start = 20.dp,  // 左侧间距
                        end = 20.dp     // 右侧间距
                    ),
                    text = "$item",  // 显示步骤编号
                    // 选中项反色：白底深灰字 vs 深灰底白字
                    color = if (selected) Color.DarkGray else Color.White,
                )
            }
        }
    }
}

/**
 * 获取步骤项的形状（首尾圆角处理）
 *
 * @param item 当前步骤项（1-based）
 * @param steps 完整步骤列表
 * @return 根据位置返回不同的形状
 */
private fun getCurrentShape(item: Int, steps: List<Int>): Shape {
    return when {
        // 第一项：左侧圆角
        item == 1 -> {
            RoundedCornerShape(topStart = 20.dp, bottomStart = 20.dp)
        }
        // 最后一项：右侧圆角
        item == steps.size -> {
            RoundedCornerShape(topEnd = 20.dp, bottomEnd = 20.dp)
        }
        // 中间项：直角
        else -> {
            RoundedCornerShape(0.dp)
        }
    }
}

/**
 * 预览函数：展示包含5个步骤的选择器
 */
@Composable
@Preview
fun PreviewRecipesSteps() {
    // 预览状态下传入步骤总数，忽略选择回调
    RecipesStepsSelection(stepsCount = 5) {}
}
